<template>
	<view>
		<!-- <view class="index_head">
			<image class="search_img" :src="require('../status/image/search.png')" mode=""></image>
			<input class="head_input" type="text" placeholder="搜索嘌呤" focus v-model="keyword" />
			<text class="search_btn" @click="searchBtn">搜索</text>
		</view> -->
		<view class="index_head"> 
	     	<image class="search_img" :src="require('../status/image/search1.png')" mode="" @click.stop="searchBtn"></image>
			<input  class="head_input" type="text" placeholder="搜索嘌呤" focus v-model="keyword">
		</view>
	</view>
</template> 
<script> 
	export default { 
		data() {
			return {
				keyword: ''
			};
		},
		methods: {
			// 点击搜索
			searchBtn() {
				if (this.keyword) {
					uni.navigateTo({
						url: '../querypiaol/index?keyword=' + this.keyword
					})
					// this.keyword = ''
				} else {
					uni.showToast({
						title: '输入要查询的关键字',
						icon: 'none',
						duration: 1000
					})
				}
			},
		}
	}
</script>

<style lang="less">
		.index_head{
			position: relative;
			height: 100vh;
			background-color: #0b81d8;
			.head_input{
				padding-left: 60rpx;
				position: absolute;
				top: 100rpx;
				left: 50%;
				transform: translateX(-50%);
				height: 90rpx;
				line-height: 90rpx;
				width: 80%;
				background-color: #fff;
				border-radius: 10rpx;
			}
			.search_img{
				position: absolute;
				top: 116rpx;
				width: 60rpx;
				height: 60rpx;
				right: 60rpx;
				z-index: 10;
			}
		}
		// .index_head {
		// 	position: relative;
		// 	padding: 0 30rpx;
		// 	height: 400rpx;

		// 	.search_img {
		// 		position: absolute;
		// 		top: 20rpx;
		// 		left: 60rpx;
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 		z-index: 1001;
		// 	}

		// 	.head_input {
		// 		position: relative;
		// 		padding-left: 100rpx;
		// 		width: calc(100% - 280rpx);
		// 		height: 80rpx;
		// 		font-size: 28rpx;
		// 		color: #a4a4a4;
		// 		background-color: #fff;
		// 		border-radius: 40rpx;
		// 	}
		// 	.search_btn{
		// 		position: absolute;
		// 		right: 50rpx;
		// 		top: -2rpx;
		// 		width: 200rpx;
		// 		height: 82rpx;
		// 		line-height: 82rpx;
		// 		font-size: 30rpx; 
		// 		color: #01cb9b;
		// 		z-index: 1000;
		// 		text-align: center; 
		// 		background-color: #fff; 
		// 		border-radius: 0 40rpx 40rpx 0;
		// 		border-left: 2rpx solid #01cb9b;
		// 	}
		// 	.head_tit {
		// 		color: #fff;
		// 		font-size: 28rpx;
		// 	}

		// 	.index_nav_top {
		// 		display: flex;
		// 		position: absolute;
		// 		width: calc(100% - 60rpx);
		// 		top: 260rpx;
		// 		height: 200rpx;
		// 		border-radius: 30rpx;
		// 		background-color: #fff;

		// 		.navigator {
		// 			flex: 1;
		// 			line-height: 200rpx;
		// 			font-size: 30rpx;
		// 			text-align: center;

		// 			.nav_top_image {
		// 				margin-right: 40rpx;
		// 				width: 60rpx;
		// 				height: 60rpx;
		// 				vertical-align: middle;
		// 			}
		// 		}

		// 		&::before {
		// 			position: absolute;
		// 			content: '';
		// 			left: 50%;
		// 			top: 50%;
		// 			transform: translate(-50%, -50%);
		// 			width: 2rpx;
		// 			height: 100rpx;
		// 			background-color: #e1e1e1;
		// 		}
		// 	}

		// }
</style>
